<template>
    <div class="w100">
        <mu-button flat small @click="startPick">选择文件</mu-button>
        <input :key="inputUpdateKey" :multiple="config.isMultiple" @change="finishPic" type="file" style="display: none"
               ref="pick" :accept="config.accept"></input>
        <div v-show="insideValue === null || insideValue.length === 0">
            尚未选择任何文件
        </div>
        <div v-show="insideValue !== null && insideValue.length > 0">
            <mu-grid-list v-model="insideValue" class="" :cols="6">
                <mu-grid-tile v-for="(file, index) in insideValue" :key="index" class="pos-r">
                    <div v-if="config.fileType === 'file'" class="pos-a t0 l0 r0 b0 flcc bca01">
                        <mu-icon color="primary" value="folder_open" size="50"></mu-icon>
                    </div>
                    <img :alt="file.name" :src="$http.baseUrl() + file.url" v-if="file !== undefined && config.fileType === 'pic'"/>
                    <div slot="title">{{file.name}}</div>
                    <div slot="subTitle">{{file.size}}</div>
                    <mu-button small slot="action" @click="showPic(file.url)" icon v-show="config.fileType === 'pic'">
                        <mu-icon value="aspect_ratio"></mu-icon>
                    </mu-button>
                    <mu-button small slot="action" @click="remove(index)" icon>
                        <mu-icon value="close"></mu-icon>
                    </mu-button>
                </mu-grid-tile>
            </mu-grid-list>
        </div>
        <mu-dialog width="800" max-width="80%" :open.sync="open" scrollable :padding="64">
            <img :src="$http.baseUrl() + viewUrl" alt="预览" class="w100">
        </mu-dialog>
    </div>
</template>

<script>
    export default {
        name: "EzFiles",
        props: {
            value: {},
            config: {}
        },
        data() {
            return {
                insideValue: null,
                files: [],
                //每次重新选择时更新刷新一下
                inputUpdateKey: Math.random(),
                pickedFiles: null,
                upload: {
                    waits: [],
                    done: [],
                },
                //图片预览
                open: false,
                //预览地址
                viewUrl: "",
            }
        },
        mounted() {
            //初始化数据
            if (!this.config.isMultiple) {
                //单个文件
                if (!this.$utils.isObject(this.value)) {
                    this.insideValue = []
                } else {
                    this.insideValue = [this.value]
                }
            } else {
                //多个文件
                if (!this.$utils.isArray(this.value)) {
                    this.insideValue = []
                } else {
                    this.insideValue = this.value
                }
            }
        },
        methods: {
            startPick() {
                //初始化数据
                this.upload.done = []
                this.$refs.pick.click()
            },
            finishPic(e) {
                this.upload.waits = []
                for (let file of e.target.files) {
                    this.upload.waits.push(file)
                }
                this.uploads()
            },
            uploads() {
                if (this.upload.waits.length === 0) {
                    this.finishUpload()
                    return
                }
                let cur = this.upload.waits.shift()
                this.$http.upload(cur, res => {
                    this.upload.done.push(res.data)
                    this.uploads()
                })
            },
            finishUpload() {
                if (this.upload.done.length < 1) {
                    return
                }
                if (this.config.isMultiple) {
                    //多文件上传的，追加
                    this.insideValue = this.insideValue.concat(this.upload.done)
                } else {
                    //单文件上传的，替换
                    this.insideValue = [this.upload.done.pop()]
                }

                this.inputUpdateKey = Math.random()
            },
            remove(index) {
                this.insideValue.splice(index, 1)
            },
            showPic(path) {
                this.viewUrl = path
                this.open = true
            }
        },
        watch: {
            insideValue(val) {
                if (this.config.isMultiple) {
                    this.$emit("input", val)
                }else {
                    this.$emit("input", val[0])
                }
            }
        },
    }
</script>

<style scoped>

</style>